<template>
  <div class="index">
    <div class="title">
      <van-search
        class="navbar"
        placeholder="请输入搜索关键词"
        background="#3194ff"
        shape="round"
      >
        <template #left>
          <van-icon class="left" name="wap-nav" @click="showPopup" />
        </template>
      </van-search>
      <div class="search">
        <van-icon name="search" />
      </div>
    </div>
    <van-tabs color="#3296fa" title-active-color="#3296fa" class="tabs">
      <van-tab
        :title="'推荐' + (index + 1)"
        class="tab"
        v-for="(item, index) in 10"
        :key="index"
      >
        <template #default>
          <div class="item"></div>
        </template>
      </van-tab>
    </van-tabs>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
      class="popup"
    >
      <div class="myicon" @click="closePopup">
        <van-icon name="cross" size="28px" />
      </div>
      <div class="mychannel">
        <div class="tit">
          <div class="text">我的频道</div>
          <div class="btn">编辑</div>
        </div>
        <div class="items">
          <div class="item">ios</div>
          <div class="item">区块链</div>
          <div class="item">人工智能</div>
          <div class="item">JavaScript</div>
          <div class="item">Android</div>
          <div class="item">后端</div>
          <div class="item">java</div>
          <div class="item">go</div>
          <div class="item">前端</div>
          <div class="item">产品</div>
          <div class="item">架构</div>
          <div class="item">python</div>
          <div class="item">数码产品</div>
          <div class="item">Linux</div>
        </div>
        <div class="recommend">
          <p>频道推荐</p>
          <div class="items">
            <div class="item">
              <van-icon name="plus" />
              <span>开发者咨询</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>css</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>算法</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>面试</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>科技动态</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>js</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>设计</span>
            </div>
            <div class="item">
              <van-icon name="plus" />
              <span>html</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      // 控制左侧菜单栏显示与隐藏
      show: false
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    closePopup () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #3194ff;
    .navbar {
      flex: 1;
      .left {
        color: #fff;
        margin-right: 15px;
        font-size: 20px;
      }
    }
    .search {
      padding: 0 10px 0 5px;
      .van-icon,
      .van-icon:before {
        display: inline-block;
        font-size: 20px;
        color: #fff;
        line-height: 33.6px;
      }
    }
  }
  .tabs {
    /deep/.van-tab__text {
      padding: 0 5px;
      font-size: 14px;
    }
  }
  .popup {
    padding: 15px 10px;
    .myicon {
      margin: 15px 0;
      color: #2c3e50;
    }
    .mychannel {
      .tit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #333333;
        .btn {
          font-size: 12px;
          padding: 4px 8px;
          border: 1px solid #f85f5d;
          border-radius: 25px;
          color: #f85f5d;
        }
      }
      .items {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        margin-top: 30px;
        .item {
          padding: 9px;
          background: #f4f5f6;
          color: #222222;
          border-radius: 6px;
          margin-right: 12px;
          margin-bottom: 10px;
        }
      }
    }
    .recommend {
      margin-top: 50px;
      p {
        font-size: 16px;
        color: #333333;
        margin-bottom: 20px;
      }
      .items {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        .item {
          display: flex;
          align-items: center;
          padding: 9px;
          background: #f4f5f6;
          color: #222222;
          border-radius: 6px;
          margin-right: 12px;
          margin-bottom: 10px;
          span {
            padding-left: 5px;
          }
        }
      }
    }
  }
}
</style>
